<template>
  <div class="proto-settings">
    <div class="section-header">
      <h2>设置</h2>
    </div>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本设置" name="basic">
        <el-form label-position="top" class="settings-form">
          <el-divider content-position="left">项目信息</el-divider>
          
          <el-form-item label="项目名称">
            <el-input v-model="settings.projectName" placeholder="输入项目名称" />
          </el-form-item>
          
          <el-form-item label="项目描述">
            <el-input 
              v-model="settings.projectDescription" 
              type="textarea" 
              :rows="3" 
              placeholder="输入项目描述"
            />
          </el-form-item>
          
          <el-form-item label="创建者">
            <el-input v-model="settings.author" placeholder="输入创建者信息" />
          </el-form-item>
          
          <el-divider content-position="left">画布设置</el-divider>
          
          <el-form-item label="默认画布尺寸">
            <el-radio-group v-model="settings.canvasSize">
              <el-radio label="custom">自定义</el-radio>
              <el-radio label="desktop">桌面端 (1280×720)</el-radio>
              <el-radio label="tablet">平板 (768×1024)</el-radio>
              <el-radio label="mobile">手机 (375×667)</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item v-if="settings.canvasSize === 'custom'" label="自定义尺寸">
            <div class="size-inputs">
              <el-input-number 
                v-model="settings.customWidth" 
                :min="100" 
                :max="3000" 
                placeholder="宽度" 
              />
              <span class="size-separator">×</span>
              <el-input-number 
                v-model="settings.customHeight" 
                :min="100" 
                :max="3000" 
                placeholder="高度" 
              />
              <span class="size-unit">px</span>
            </div>
          </el-form-item>
          
          <el-form-item label="背景颜色">
            <el-color-picker v-model="settings.backgroundColor" />
          </el-form-item>
          
          <el-form-item label="显示网格">
            <el-switch v-model="settings.showGrid" />
          </el-form-item>
          
          <el-form-item v-if="settings.showGrid" label="网格大小">
            <el-input-number v-model="settings.gridSize" :min="5" :max="50" :step="5" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      
      <el-tab-pane label="界面设置" name="interface">
        <el-form label-position="top" class="settings-form">
          <el-divider content-position="left">外观</el-divider>
          
          <el-form-item label="主题">
            <el-radio-group v-model="settings.theme">
              <el-radio label="light">浅色</el-radio>
              <el-radio label="dark">深色</el-radio>
              <el-radio label="system">跟随系统</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="主题色">
            <el-color-picker v-model="settings.primaryColor" />
          </el-form-item>
          
          <el-form-item label="界面缩放">
            <el-slider 
              v-model="settings.uiScale" 
              :step="0.05" 
              :min="0.8" 
              :max="1.5" 
              :format-tooltip="value => `${Math.round(value * 100)}%`" 
            />
          </el-form-item>
          
          <el-divider content-position="left">编辑器</el-divider>
          
          <el-form-item label="启用自动保存">
            <el-switch v-model="settings.autoSave" />
          </el-form-item>
          
          <el-form-item v-if="settings.autoSave" label="自动保存间隔">
            <el-select v-model="settings.autoSaveInterval">
              <el-option label="30秒" :value="30" />
              <el-option label="1分钟" :value="60" />
              <el-option label="5分钟" :value="300" />
              <el-option label="10分钟" :value="600" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="默认字体">
            <el-select v-model="settings.defaultFont">
              <el-option label="默认 (Arial)" value="Arial, sans-serif" />
              <el-option label="宋体" value="SimSun, serif" />
              <el-option label="黑体" value="SimHei, sans-serif" />
              <el-option label="微软雅黑" value="Microsoft YaHei, sans-serif" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="默认字号">
            <el-input-number v-model="settings.defaultFontSize" :min="12" :max="24" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      
      <el-tab-pane label="AI设置" name="ai">
        <el-form label-position="top" class="settings-form">
          <el-divider content-position="left">AI助手设置</el-divider>
          
          <el-form-item label="启用AI助手">
            <el-switch v-model="settings.enableAI" />
          </el-form-item>
          
          <template v-if="settings.enableAI">
            <el-form-item label="AI模型">
              <el-select v-model="settings.aiModel">
                <el-option label="基础模型" value="basic" />
                <el-option label="标准模型" value="standard" />
                <el-option label="高级模型" value="advanced" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="智能建议">
              <el-switch v-model="settings.aiSuggestions" />
            </el-form-item>
            
            <el-form-item label="设计辅助">
              <el-checkbox-group v-model="settings.aiFeatures">
                <el-checkbox label="layout">布局建议</el-checkbox>
                <el-checkbox label="color">颜色建议</el-checkbox>
                <el-checkbox label="font">字体建议</el-checkbox>
                <el-checkbox label="content">内容生成</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="AI响应速度">
              <el-slider 
                v-model="settings.aiResponseSpeed" 
                :step="1" 
                :min="1" 
                :max="10" 
                :format-tooltip="value => value === 10 ? '最快' : (value === 1 ? '最慢' : value)"
              />
            </el-form-item>
          </template>
          
          <el-divider content-position="left">API设置</el-divider>
          
          <el-form-item label="API密钥">
            <el-input 
              v-model="settings.apiKey" 
              placeholder="输入API密钥" 
              show-password
            />
          </el-form-item>
          
          <el-form-item label="API终端点">
            <el-input v-model="settings.apiEndpoint" placeholder="输入API终端点URL" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      
      <el-tab-pane label="快捷键" name="shortcuts">
        <el-form label-position="top" class="settings-form">
          <el-divider content-position="left">编辑快捷键</el-divider>
          
          <div class="shortcuts-list">
            <div v-for="(shortcut, key) in settings.shortcuts" :key="key" class="shortcut-item">
              <span class="shortcut-name">{{ shortcutNames[key] }}</span>
              <div class="shortcut-key">
                <el-tag>{{ shortcut }}</el-tag>
                <el-button type="text" size="small" @click="editShortcut(key)">
                  编辑
                </el-button>
              </div>
            </div>
          </div>
          
          <el-divider content-position="left">其他选项</el-divider>
          
          <el-form-item>
            <el-button type="primary" @click="resetShortcuts">恢复默认快捷键</el-button>
            <el-button @click="exportShortcuts">导出快捷键设置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      
      <el-tab-pane label="关于" name="about">
        <div class="about-section">
          <div class="app-info">
            <img src="https://placeholder.pics/svg/128/DEDEDE/555555/Logo" alt="Logo" class="logo" />
            <h2>UI原型设计工具</h2>
            <p class="version">版本 1.0.0</p>
            <p class="copyright">© 2024 NbSaaS. 保留所有权利。</p>
          </div>
          
          <div class="app-description">
            <p>UI原型设计工具是一款功能强大的设计软件，帮助设计师和开发者快速创建高保真UI界面原型。</p>
            <p>结合AI辅助功能，让原型设计更高效、更专业。</p>
          </div>
          
          <div class="update-info">
            <div class="update-header">
              <h3>检查更新</h3>
              <el-button type="primary" size="small" @click="checkUpdate" :loading="checking">检查更新</el-button>
            </div>
            <p v-if="updateAvailable" class="update-available">
              发现新版本：v1.1.0
              <el-button type="success" size="small">立即更新</el-button>
            </p>
            <p v-else-if="checking">
              正在检查更新...
            </p>
            <p v-else>
              当前已是最新版本
            </p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    
    <div class="settings-actions">
      <el-button type="primary" @click="saveSettings">保存设置</el-button>
      <el-button @click="resetSettings">恢复默认设置</el-button>
    </div>
    
    <el-dialog v-model="shortcutDialogVisible" title="编辑快捷键" width="400px">
      <div class="shortcut-editor">
        <p>正在编辑: {{ shortcutNames[currentEditingShortcut] }}</p>
        <p>当前快捷键: {{ settings.shortcuts[currentEditingShortcut] }}</p>
        <div class="shortcut-input">
          <el-input
            v-model="newShortcut"
            placeholder="按下新的快捷键组合"
            readonly
            @keydown.stop="recordShortcut"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shortcutDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveShortcut">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 设置标签页
const activeTab = ref('basic')

// 设置数据
const settings = reactive({
  // 基本设置
  projectName: 'UI原型设计项目',
  projectDescription: '这是一个UI原型设计项目描述',
  author: '设计师',
  canvasSize: 'desktop',
  customWidth: 1280,
  customHeight: 720,
  backgroundColor: '#ffffff',
  showGrid: true,
  gridSize: 10,
  
  // 界面设置
  theme: 'light',
  primaryColor: '#409EFF',
  uiScale: 1,
  autoSave: true,
  autoSaveInterval: 60,
  defaultFont: 'Microsoft YaHei, sans-serif',
  defaultFontSize: 14,
  
  // AI设置
  enableAI: true,
  aiModel: 'standard',
  aiSuggestions: true,
  aiFeatures: ['layout', 'color', 'font'],
  aiResponseSpeed: 5,
  apiKey: '',
  apiEndpoint: 'https://api.example.com/v1',
  
  // 快捷键设置
  shortcuts: {
    save: 'Ctrl+S',
    copy: 'Ctrl+C',
    paste: 'Ctrl+V',
    cut: 'Ctrl+X',
    undo: 'Ctrl+Z',
    redo: 'Ctrl+Shift+Z',
    group: 'Ctrl+G',
    ungroup: 'Ctrl+Shift+G',
    bringForward: 'Ctrl+]',
    sendBackward: 'Ctrl+[',
    delete: 'Delete',
    selectAll: 'Ctrl+A',
    newCanvas: 'Ctrl+N',
    preview: 'F9'
  }
})

// 快捷键名称映射
const shortcutNames = {
  save: '保存',
  copy: '复制',
  paste: '粘贴',
  cut: '剪切',
  undo: '撤销',
  redo: '重做',
  group: '组合',
  ungroup: '解组',
  bringForward: '上移一层',
  sendBackward: '下移一层',
  delete: '删除',
  selectAll: '全选',
  newCanvas: '新建画布',
  preview: '预览'
}

// 快捷键编辑
const shortcutDialogVisible = ref(false)
const currentEditingShortcut = ref('')
const newShortcut = ref('')

// 更新检查
const checking = ref(false)
const updateAvailable = ref(false)

// 保存设置
const saveSettings = () => {
  // 在实际应用中，这里应该将设置保存到本地存储或者发送到服务器
  ElMessage.success('设置已保存')
}

// 重置设置
const resetSettings = () => {
  ElMessage.warning('确定要恢复默认设置吗？')
  // 在实际应用中，这里应该重置设置为默认值
}

// 编辑快捷键
const editShortcut = (key) => {
  currentEditingShortcut.value = key
  newShortcut.value = settings.shortcuts[key]
  shortcutDialogVisible.value = true
}

// 记录快捷键
const recordShortcut = (event) => {
  event.preventDefault()
  
  const keys = []
  if (event.ctrlKey) keys.push('Ctrl')
  if (event.shiftKey) keys.push('Shift')
  if (event.altKey) keys.push('Alt')
  if (event.metaKey) keys.push('Meta')
  
  // 添加按键
  if (event.key !== 'Control' && event.key !== 'Shift' && event.key !== 'Alt' && event.key !== 'Meta') {
    keys.push(event.key === ' ' ? 'Space' : event.key.length === 1 ? event.key.toUpperCase() : event.key)
  }
  
  if (keys.length > 0) {
    newShortcut.value = keys.join('+')
  }
}

// 保存快捷键
const saveShortcut = () => {
  if (newShortcut.value) {
    settings.shortcuts[currentEditingShortcut.value] = newShortcut.value
    shortcutDialogVisible.value = false
    ElMessage.success('快捷键已更新')
  } else {
    ElMessage.warning('请指定有效的快捷键')
  }
}

// 重置快捷键
const resetShortcuts = () => {
  settings.shortcuts = {
    save: 'Ctrl+S',
    copy: 'Ctrl+C',
    paste: 'Ctrl+V',
    cut: 'Ctrl+X',
    undo: 'Ctrl+Z',
    redo: 'Ctrl+Shift+Z',
    group: 'Ctrl+G',
    ungroup: 'Ctrl+Shift+G',
    bringForward: 'Ctrl+]',
    sendBackward: 'Ctrl+[',
    delete: 'Delete',
    selectAll: 'Ctrl+A',
    newCanvas: 'Ctrl+N',
    preview: 'F9'
  }
  ElMessage.success('已恢复默认快捷键设置')
}

// 导出快捷键设置
const exportShortcuts = () => {
  ElMessage.success('快捷键设置已导出')
}

// 检查更新
const checkUpdate = () => {
  checking.value = true
  
  // 模拟检查更新过程
  setTimeout(() => {
    checking.value = false
    updateAvailable.value = Math.random() > 0.5
    
    if (updateAvailable.value) {
      ElMessage.success('发现新版本')
    } else {
      ElMessage.info('当前已是最新版本')
    }
  }, 1500)
}
</script>

<style scoped>
.proto-settings {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.settings-form {
  flex: 1;
  overflow-y: auto;
}

.size-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.size-separator, .size-unit {
  color: #909399;
}

.shortcuts-list {
  margin-bottom: 24px;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.shortcut-name {
  color: #606266;
}

.shortcut-key {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.shortcut-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shortcut-input {
  margin-top: 8px;
}

.about-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.app-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.app-info h2 {
  margin: 0;
  color: #303133;
}

.version {
  color: #909399;
  margin: 8px 0;
}

.copyright {
  color: #909399;
  font-size: 12px;
}

.app-description {
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #606266;
  text-align: center;
}

.update-info {
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.update-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.update-header h3 {
  margin: 0;
  color: #303133;
}

.update-available {
  color: #67c23a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 